<template>
    <div class="property" :key="new Date().getTime()">
        <!-- <functional title="属性编辑" icon="fa fa-edit" type="property" options="left" :isFooter="false">
            <el-collapse v-model="activeNames">
                <el-collapse-item v-for="(item, index) in propertyItem" :key="index" :title="`- ${item.label}`" :name="item.id">
                    <editorform :options="item.children" :property="propertyItem" :data="layer"></editorform>
                </el-collapse-item>
            </el-collapse>
        </functional> -->
        <functional title="属性编辑" class="propertyContents" icon="fa fa-edit" type="property" options="left" :isFooter="true" :class="store.coverage ? 'propertyToRight' : ''">
            <el-collapse v-model="activeNames">
                <!-- 通用,顶部标绘信息 -->
                <plot_style :graphic="graphic" id="1"></plot_style>
                <!-- 图上文字 -->
                <div v-if="plottingType == 'ordinaryText' || plottingType == 'facadeText' || plottingType == 'rotateText' || plottingType == 'marqueeText'">
                    <!-- 普通文字 -->
                    <ordinaryText :graphic="graphic" id="2" v-if="plottingType == 'ordinaryText'"></ordinaryText>
                    <!-- 特殊文字 -->
                    <materialOptions :graphic="graphic" id="2" v-else></materialOptions>
                </div>

                <div v-else>
                    <!-- <template> -->
                    <iconoint :graphic="graphic" id="2" v-if="plottingType == 'iconPoint'"></iconoint>
                    <!-- 图上线段 -->
                    <segment
                        :graphic="graphic"
                        id="2"
                        v-else-if="plottingType == 'segment' || plottingType == 'curve' || plottingType == 'pipeline' || plottingType == 'corridor' || plottingType == 'rail' || plottingType == 'road'"
                    ></segment>
                    <!-- 二维平面 -->
                    <twodimensionalsurface
                        :graphic="graphic"
                        id="2"
                        v-else-if="plottingType == 'plane' || plottingType == 'rectangle' || plottingType == 'polygon' || plottingType == 'regular' || plottingType == 'circle' || plottingType == 'sector' || plottingType == 'ellipse'"
                    ></twodimensionalsurface>
                    <!-- 三维立体 -->
                    <threedimensional :graphic="graphic" id="2" v-else></threedimensional>
                    <!-- </template> -->
                    <labelStyle :graphic="graphic" id="3"></labelStyle>
                </div>
                <locationOrShowMsg :graphic="graphic" id="4"></locationOrShowMsg>
            </el-collapse>
            <template #footer>
                <div class="submitBtn">
                    <el-button color="#20a0ff" :dark="true" plain size="small" @click="saveEditorDraw(graphic)">保存</el-button>
                    <!-- <el-button color="#20a0ff" :dark="true" plain size="small">添加</el-button> -->
                </div>
            </template>
        </functional>
    </div>
</template>
<script setup lang="ts">
import { computed, ref, watch, reactive } from "vue";
import { store, graphicLayer } from "@/utils/global";
import { saveEditorDraw } from "@/utils/draw/saveEditorDrawData";
// 标绘样式
import plot_style from "@/views/editor/components/plot_style.vue";
// 普通文字样式
import ordinaryText from "@/views/editor/components/ordinaryText.vue";
// 位置及显示
import locationOrShowMsg from "@/views/editor/components/locationOrShowMsg.vue";
// 特殊文字样式
import materialOptions from "@/views/editor/components/materialOptions.vue";
// label文字样式
import labelStyle from "@/views/editor/components/labelStyle.vue";
// 图标点
import iconoint from "@/views/editor/components/plotting/iconoint.vue";
// 图上线段
import segment from "@/views/editor/components/plotting/segment.vue";
// 二维平面
import twodimensionalsurface from "@/views/editor/components/plotting/twodimensionalsurface.vue";
// 三维立体
import threedimensional from "@/views/editor/components/plotting/threedimensional.vue";
/**
 * 获取到当前标绘数据
 */
const graphic = graphicLayer.getGraphicById(store.rightClickData.id);
/**
 * 标绘类型
 */
const plottingType: any = ref(graphic.options.plottingType);
// 默认打开所有选项
const activeNames: any = ref(["1", "2", "3", "4"]);
/**
 * 监听标绘修改
 */
//  graphicLayer.on()
// 保存修改的标绘数据
const saveEditorDrawData = () => {
    /**
     * 处理要提交的数据
     */
    // 数据转换
    let postData = JSON.parse(JSON.stringify(graphic.toJSON()));
    postData.style = JSON.stringify(postData.style);
    postData.folderId = postData.folderId[postData.folderId.length - 1];
    if (postData.position) {
        postData.positions = JSON.stringify(postData.position);
        postData.position = JSON.stringify(postData.position);
    } else {
        postData.positions = JSON.stringify(postData.positions);
    }
    postData.id = graphic.options.id;
    console.log(graphic);
    console.log(postData);
    // 提交数据
    // updateDrawData(postData).then((res) => {
    //     ElMessage({
    //         message: "保存成功",
    //         type: "success",
    //     });
    //     // 获取树菜单数据
    //     let treeNode = (storeData.tree as any).getNode(layer.value.id).data;
    //     // 更新数据名称
    //     treeNode.name = postData.name;
    //     // 判断是否修改文件夹
    //     if (treeNode.pid != postData.folderId) {
    //         (storeData.tree as any).remove(layer.value.id);
    //         // 更新pid
    //         treeNode.pid = postData.folderId;
    //         setTimeout(() => {
    //             (storeData.tree as any).append(treeNode, postData.folderId);
    //             if (treeNode.show) {
    //                 (storeData.tree as any).setChecked(layer.value.id, true);
    //             }
    //         }, 300);
    //     }
    // });
};
</script>
<style scoped lang="scss">
.propertyContents {
    transition: all 0.2s;
}
.propertyToRight {
    left: 320px;
}
</style>
